<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部组件</title>
    <script src="../js/axios.min.js"></script>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>
    <!--使用组件名称-->
    <users></users>
    <users></users>
</div>
</body>

</html>


<script>
    //定义用户列表组件
    const users = {
        template: "<div><h3>用户列表</h3><h3>{{count}}--{{name}}--{{countSqrt}}</h3><button @click='changeCount'>+</button><li v-for=' item in items'>{{item}}</li></div>",//用于定义组件html内容
        data() {  //定义一系列组件数据,只能在该组件使用
            return {
                count: 0,
                name: "小陈",
                items:[],
            };
        },
        methods: {//用来给当前组件定义一系列的函数
            changeCount() {
                this.count++;
            }
        },
        computed: {
            countSqrt(){
                return this.count * this.count
            }
        },
        beforeCreate(){//组件刚开始初始化,仅仅注册组件自己事件和生命周期函数

        },
        created(){

        },
        beforeMount(){ //将template中指向html编译vue模板,此时没有完成模板内容渲染

        },
        mounted(){ //已经完成渲染,将html里的内容替换成模板中的图

        },
        beforeUpdate(){//组件数据发生变化是会触发

        },
        updated(){
            //此时页面中的数据和data数据一致时触发
        },
        beforeDestroy(){
            //销毁vue实例之前触发的方法
        },
        destroyed(){
            //vue实例已经彻底销毁
        }
    };

    const app = new Vue({
        el: "#app",   //element:元素
        data: {        //data:数据 用来vue实例对象绑定一系列数据
            msg: "组件中的data",
        },
        methods: {},
        computed: {},
        components: {
            users,
        },
    });
</script>
